import React from "react";
import { css } from "@emotion/react";

// import { useAppToken } from "theme/module/useAppToken";

const errorPage = css`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
`;

const ErrorPage = (props: {
  children?:
    | string
    | number
    | boolean
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
    | React.ReactFragment
    | React.ReactPortal
    | React.ReactNode
    | null
    | undefined;
}) => {
  return (
    <div>
      {props?.children ? (
        props.children
      ) : (
        <div css={errorPage}>
          <h1>Oops!</h1>
          <p>Sorry, an unexpected error has occurred.</p>
          <p>{props?.children}</p>
        </div>
      )}
    </div>
  );
};

export default ErrorPage;
